<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件传播</title>
		<style type="text/css">
			#box1 {
				width: 300px;
				height: 300px;
				background-color: #99FF99;
			}

			#box2 {
				width: 200px;
				height: 200px;
				background-color: greenyellow;
			}

			#box3 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			function bind(obj, eventStr, callback) {
				if (obj.addEventListener) {
					obj.addEventListener(eventStr, callback, false);
				} else {
					obj.attachEvent("on" + eventStr, function() {
						callback.call(obj);
					});
				}
			}

			window.onload = function() {
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				bind(box1, "click", function(){
					alert("box1"); // box1
				});
				bind(box2, "click", function(){
					alert("box2"); // box2 box1
				});
				bind(box3, "click", function(){
					alert("box3"); // box3 box2 box1
				});
			};
		</script>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3">
				</div>
			</div>
		</div>
	</body>
</html>
